<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">		
	<title>Document</title>
<style>
div {
			background-color: blue;
			margin:30px;
			padding: 10px;
			width: 500px;
			height: 300px;		
			list-style: none;
			
		}
		.abc {
			background-color: red;	
			margin:30px;
			padding: 10px;
			width: 500px;
			height: 300px;		
			list-style: none;
		}
	</style>
</head>
<body>
	<div id="div1">
		 为什么还是没用啊 啊啊 啊啊啊啊啊啊啊啊啊  啊啊啊啊啊啊啊啊啊啊 啊啊啊
	</div>
	<button onclick="change()">点一下有惊喜哦</button>
	<script type="text/javascript">
function change(){  var abc = document.getElementById('div1').className = "abc"
	}
   


	</script>
</body>
</html>